import React, { useEffect, useState } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useKeycloak } from '../contexts/KeycloakContext';
import './common/LoadingStyles.css';

/**
 * 受保护的路由组件
 * 如果用户未认证，将重定向到登录页面
 * 如果指定了必要的角色，还会检查用户是否拥有该角色
 */
const PrivateRoute = ({ children, requiredRoles }) => {
  const { authenticated, initialized, hasRole, login } = useKeycloak();
  const location = useLocation();
  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
  
  // 保存当前路径，以便认证后返回
  useEffect(() => {
    if (initialized) {
      if (!authenticated) {
        // 保存当前完整URL（包括路径和查询参数）
        const currentPath = window.location.pathname + window.location.search;
        if (currentPath !== '/login') {
          sessionStorage.setItem('auth_redirect_path', currentPath);
          console.log('保存当前路径用于认证后重定向:', currentPath);
        }
      }
      setIsCheckingAuth(false);
    }
  }, [authenticated, initialized, location]);

  // 如果还在检查认证状态或加载Keycloak，显示加载中
  if (isCheckingAuth || !initialized) {
    return (
      <div className="auth-loading-container">
        <div className="auth-loading-spinner"></div>
        <p>正在验证登录状态...</p>
      </div>
    );
  }

  // 如果用户未认证，重定向到登录页
  if (!authenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  // 如果指定了必要角色，但用户没有该角色，显示无权限
  if (requiredRoles && !requiredRoles.some(role => hasRole(role))) {
    return (
      <div className="unauthorized-container">
        <h2>403 无权限</h2>
        <p>您没有权限访问此页面。</p>
      </div>
    );
  }

  // 用户已认证且有权限，显示受保护的内容
  return children;
};

export default PrivateRoute;
